@extends('layouts.h5')

@section('title', '积分中心')

@section('content')
    <div class="app" id="app">
        <div class="integral-header">
            <img src="{{avatar($uid)}}" class="avatar">
            <div class="userinfo">
                <h3>{{$username}}</h3>
                <p>可用积分：{{formatAmount($wallet['bonus_points'])}}</p>
            </div>
            <div class="wanfa" data-link="{{h5_page_url(47)}}">积分玩法</div>
            <div class="zengsong" data-link="{{url('h5/tree/buy')}}">购买茶树</div>
        </div>
        <div class="integral-body">
            <div class="h5-tabs">
                <div class="tab-item">
                    <span class="tab-link" :class="{active:trade_type==1}" v-on:click="switchType(1)">积分增加记录</span>
                </div>
                <div class="tab-item">
                    <span class="tab-link" :class="{active:trade_type==0}" v-on:click="switchType(0)">积分抵用记录</span>
                </div>
            </div>
            <ul class="records">
                <li v-for="item in items">
                    <div class="cell-left">@{{ item.trade_type==1 ? '+' : '-' }}@{{ item.points }}积分</div>
                    <div class="cell-center flex">
                        @{{ item.body }}
                        </div>
                    <div class="text-right">@{{ item.created_at }}</div>
                </li>
            </ul>
        </div>
    </div>
@stop

@section('foot')
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                items:[],
                trade_type:1
            },
            mounted:function () {
                this.loadDatasource();
            },
            methods:{
                loadDatasource:function () {
                    var $this = this;
                    $.ajax({
                        url:'/h5/point/getjson',
                        data:{trade_type:$this.trade_type, offset:0, count:20},
                        success:function (response) {
                            $this.items = response.items;
                        }
                    });
                },
                switchType:function (type) {
                    this.trade_type = type;
                    this.loadDatasource();
                }
            }
        });
    </script>
@stop
